<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElTag } from 'element-plus';
import * as admin from '@/api/admin.js'
import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore();

// 教师列表数据
const teachers = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const addModal = ref(false);
const updateModal = ref(false);
const search_username = ref('');
const search_status = ref('正常');
const search_phone = ref('');

const updateData = ref({
  id: '',
  username: "",
  phone: "",
  nickname: "",
  email: "",
  status: "正常",
})

const addData = ref({
  username: "",
  password: "",
  phone: "",
  email: "",
})

const showDialog = (row) => {

  updateData.value.id = row.id;
  updateData.value.username = row.username;
  updateData.value.nickname = row.nickname;
  updateData.value.phone = row.phone;
  updateData.value.email = row.email;
  updateData.value.status = row.status;

  console.log(updateData.value);
}

// 状态标签
const statusOptions = {
  active: { label: '正常', type: 'success' },
  inactive: { label: '禁用', type: 'danger' }
};

// 模拟获取数据
const fetchTeachers = async() => {
  const param = {
      currentPage: currentPage.value,
      role: 'teacher',
      username: search_username.value,
      phone: search_phone.value,
      // status: search_status.value,
  }
  const res = await admin.finduser(param)
  console.log(res);
  teachers.value = res.data;
  total.value = res.total;
  console.log(teachers.value);
};

// 搜索教师
const searchTeachers = () => {
  fetchTeachers();
};

// 删除教师
const deleteTeacher = (id) => {
  ElMessageBox.confirm('确认删除该教师？', '提示', { type: 'warning' })
    .then(() => {
      teachers.value = teachers.value.filter(teacher => teacher.id !== id);
      ElMessage.success('删除成功');
    })
    .catch(() => ElMessage.info('取消删除'));
};

// 修改教师
const editTeacher = async () => {
  const res = await admin.updateuser(updateData.value)
  if (res.code == 0) {
    ElMessage.success('修改成功');
    fetchTeachers();
    updateModal.value = false;
  }
};

// 分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchTeachers();
};



// 初始化加载数据
onMounted(() => {
  fetchTeachers();
});
</script>

<template>
  <div class="teacher-page">
    <!-- 搜索框 -->
    <el-card class="search-box">
      <el-form :inline="true">
        <el-form-item label="用户名">
          <el-input v-model="search_username" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="search_phone" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchTeachers">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 添加教师按钮 -->
    <div class="add-box">
      <el-button type="success" @click="addModal=true">➕ 添加教师</el-button>
    </div>

    <!-- 教师列表 -->
    <el-card>
      <el-table :data="teachers" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="username" label="用户名" width="150" />
        <el-table-column prop="phone" label="手机号" width="150" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="createdAt" label="创建时间" width="120" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag v-if="row.status === '正常'" type="success">
              {{ row.status }}
            </el-tag>
            <el-tag v-else-if="row.status === '禁用'" type="danger">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="showDialog(row),updateModal=true">修改</el-button>
            <el-button type="danger" size="small" @click="deleteTeacher(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="handlePageChange"
      />
    </div>

  <el-drawer
  v-model="updateModal"
  title="修改教师信息"
  direction="rtl"
  class="demo-drawer"
  >
  <div class="demo-drawer__content">
    <el-form :model="updateData">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="updateData.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="updateData.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="updateData.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="updateData.status">
            <el-radio label="正常" size="large" border>正常</el-radio>
            <el-radio label="禁用" size="large" border>禁用</el-radio>
          </el-radio-group>
        </el-form-item>
    </el-form>
    <div class="demo-drawer__footer">
      <el-button @click="cancelForm">取消</el-button>
      <el-button type="primary" :loading="loading" @click="editTeacher">提交</el-button>
    </div>
  </div>
  </el-drawer>

  <el-dialog 
  v-model="addModal" 
  title="添加教师" 
  width="30%" 
  center
  >
  <el-form 
    label-width="80px" 
    :model="addData" 
    style="padding: 10px 20px"  >
    <el-form-item label="用户名">
      <el-input v-model="addData.username" placeholder="请输入用户名" />
    </el-form-item>
    <el-form-item label="昵称">
      <el-input v-model="addData.password" placeholder="请输入密码" />
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="addData.phone" placeholder="请输入手机号" />
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="addData.email" placeholder="请输入邮箱" />
    </el-form-item>
  </el-form>

  <template #footer>
    <span class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取消</el-button>
      <el-button 
        type="primary" 
        @click="handleSubmit"
      >
        提交
      </el-button>
    </span>
  </template>
  </el-dialog>


  </div>
</template>

<style scoped>
.teacher-page {
  padding: 20px;
  background: #eef2f5;
  border-radius: 8px;
}

/* 搜索框 */
.search-box {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

/* 添加按钮 */
.add-box {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
}

/* 课程表格 */
.el-table {
  background: white;
  border-radius: 8px;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
</style>
